<template>
	<view class="content">
		<view class="tabBox">
			<view class="tab" @click="cktab(index)" :class="tabck==index?'tabck':''" v-for="(item, index) in orderTab"
				:key="index">
				{{item.name}}
			</view>
		</view>
		<view class="tabBoxbg"></view>
		<view class="contBox">
			<view class="order" v-for="(item, index) in orderCont" :key="index">
				<navigator url="/pages/order/detail">
					<view class="linebox bob1">
						<uni-row>
							<uni-col :span="12">
								订单号{{item.no}}
							</uni-col><uni-col :span="12">
								<view class="textr publicolor">{{item.stutic}}</view>
							</uni-col>
						</uni-row>
					</view>
					<view class="linebox">
						<uni-row>
							<uni-col :span="6">
								预约人
							</uni-col><uni-col :span="18">
								<view class="textr">{{item.name}}</view>
							</uni-col>
						</uni-row>
					</view>
					<view class="linebox">
						<uni-row>
							<uni-col :span="6">
								预约项目
							</uni-col><uni-col :span="18">
								<view class="textr">{{item.xiangmu}}</view>
							</uni-col>
						</uni-row>
					</view>
					<view class="linebox">
						<uni-row>
							<uni-col :span="6">
								拍摄时间
							</uni-col><uni-col :span="18">
								<view class="textr">{{item.time}}</view>
							</uni-col>
						</uni-row>
					</view>
					<view class="linebox">
						<uni-row>
							<uni-col :span="6">
								服务详情
							</uni-col><uni-col :span="18">
								<view class="textr publicolor">正在安排化妆师</view>
							</uni-col>
						</uni-row>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderCont: [{
						id: 0,
						no: '20224564798777',
						time: '2022-02-22 09:30',
						stutic: '已完成',
						xiangmu: '证件照（白色背景拍摄）',
						name: '张三'
					}, {
						id: 1,
						no: '20224564798777',
						time: '2022-02-22 09:30',
						stutic: '已完成',
						xiangmu: '证件照（白色背景拍摄）',
						name: '张三'
					},
					{
						id: 2,
						no: '20224564798777',
						time: '2022-02-22 09:30',
						stutic: '已完成',
						xiangmu: '证件照（白色背景拍摄）',
						name: '张三'
					}
				],
				tabck: "0",
				orderTab: [{
						id: 0,
						name: '全部'
					},
					{
						id: 1,
						name: '待服务'
					},
					{
						id: 2,
						name: '服务中'
					},
					{
						id: 3,
						name: '已完成'
					},
					{
						id: 4,
						name: '已关闭'
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			cktab(index) {
				this.tabck = index
			}
		}
	}
</script>

<style lang="scss">
	.contBox {

		.order {
			width: 670rpx;
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background: #fff;

			.bob1 {
				border-bottom: 1px solid #eee;
			}

			.linebox {
				line-height: 60rpx;
				font-size: 28rpx;
			}
		}
	}

	.tabBoxbg {
		width: 750rpx;
		height: 120rpx;
	}

	.tabBox {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		background: #fff;
		width: 750rpx;

		.tab {
			flex: 1;
			line-height: 90rpx;
			text-align: center;
			box-sizing: border-box;
		}

		.tabck {
			color: #2979ff;
			font-weight: bold;
			border-bottom: 2px solid #2979ff;
		}
	}
</style>